.box{

    overflow: hidden;
    .right_box{
        width: 100%;
        // height: 2000px;
        background-color: rgba(255, 255, 255, 0.7);
        padding-top: 3rem;
        padding-bottom: 3rem;
        position: relative;
        .music_box{
            width: 90%;
            margin: 0 auto;
            height: 320px;
            // border: 1px solid blue;
            margin-bottom: 2rem;
            padding-top: 5px;
            .p{
                font-size: 20px;
                font-weight: 600;
                color: skyblue;
                cursor:pointer;
                padding-bottom: 10px;
                border-bottom: 3px solid skyblue;
                padding-left: 10px;
            }
            ul{
                width: 100%;
                height: 90%;
                // border: 1px solid red;
                display: flex;
                justify-content: space-around;
                padding-top: 20px;
                li{
                    width: 20%;
                    height: 100%;
                    // border: 1px solid blue;
                    cursor:pointer;
                    transition: all 0.5s;
                    position: relative;

                    .text{
                        pointer-events: none;
                        width: 100%;
                        height: 80px;
                        background-color: rgba(255, 255, 255, .7);
                        position: absolute;
                        transition: all 0.5s;
                        bottom: 0;
                        border-radius: 10px 10px;
                        overflow: hidden;
                        h1{
                            width: 80%;
                            overflow: hidden;  
                            margin-top: 10%;
                            margin-left: 10%;
                            font-size: 16px;
                            text-overflow: ellipsis;  
                            white-space: nowrap; 
                        }
                        .author{
                            // border: 1px solid red;
                            margin-top: 1%;
                            margin-left: 10%;
                            font-size: 12px;
                            text-overflow: ellipsis;  
                            white-space: nowrap; 
                            overflow: hidden;  
                            width: 40%;
                        }
                        .brief{
                            font-size: 12px;
                            width: 70%;  
                            height: 50%;
                            margin-left: 10%;
                            margin-top: 10%;
                        }
                        .date{
                            font-size: 12px;
                            margin-top: 5%;
                           margin-left: 50%;
                        }
                    }
                }

                li:hover{
                    // width: 21%;
                    // height: 100%;
                    transform: scale(1,1.1);
                    .text{
                        height: 100%;
                    }
                }
            }
        }
    }
}
